<template>
    <!-- v-if="JSON.stringify(this.bannerlist) != '[]'" -->
    <div class="swiper1">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div
                    class="swiper-slide"
                    v-for="(item, index) in bannerlist"
                    :key="index"
                    @click="goBnner(item.jump_url)"
                >
                    <img :src="item.image_url" alt="" />
                    <!-- <h1><span>科学家提出基因演化新假说</span></h1> -->
                </div>
                <!-- <div class="swiper-slide">
                    <img src="../assets/images/aaa.jpg" alt="" />
                    <h1><span>科学家提出基因演化新假说</span></h1>
                </div>
                <div class="swiper-slide">
                    <img src="../assets/images/bbb.jpg" alt="" />
                    <h1><span>科学家提出基因演化新假说</span></h1>
                </div>
                <div class="swiper-slide">
                    <img src="../assets/images/ccc.jpg" alt="" />
                    <h1><span>科学家提出基因演化新假说</span></h1>
                </div> -->
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <div class="swiper-button-prev btnswiper">
                <img src="../assets/img/i_icon_banner_left.png" alt="" />
            </div>
            <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
            <div class="swiper-button-next btnswiper">
                <img src="../assets/img/i_icon_banner_right.png" alt="" />
            </div>
            <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
        </div>
    </div>
</template>

<script>
import Swiper, {
    Autoplay,
    EffectCoverflow,
    EffectCube,
    Pagination,
    Navigation,
} from 'swiper';
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);
import { axiosGet } from '../server/axios';
import 'swiper/css/bundle';

// swiper.less/sass/css 决定了基础的样式
import 'swiper/css';
export default {
    name: 'SwiPer',
    props: {
        group: String,
    },
    data() {
        return {
            bannerlist: [],
        };
    },
    mounted() {
        axiosGet(
            'api/banners',
            {
                group: this.group,
            },
            (res) => {
                console.log(res);
                if (res.code != 'ok') {
                    this.$notify({
                        title: '警告',
                        message: res.msg,
                        type: 'warning',
                    });
                }
                this.bannerlist = res.data;
                setTimeout(() => {
                    this.initBanner();
                });
            }
        );
    },
    methods: {
        goBnner(url) {
            let a = document.createElement('a');
            a.href = url;
            a.target = '_blank';
            console.log(a);
            a.click();
        },
        initBanner() {
            new Swiper('.swiper-container', {
                pagination: {
                    el: '.swiper-pagination',
                    bulletElement: 'li',
                    bulletActiveClass: 'my-bullet-active',
                    bulletClass: 'my-bullet', //需设置.my-bullet样式
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                    hideOnClick: true,
                },
                autoplay: {
                    delay: 4000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                loop: true,
                on: {
                    navigationShow: function () {
                        console.log('按钮显示了');
                    },
                },
            });
        },
    },
};
</script>

<style lang="scss">
.swiper-container {
    position: relative;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}
.swiper-slide {
    img {
        width: 100%;
    }

    h1 {
        height: 60px;
        display: none;
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.8)
        );
        font-size: 24px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #ffffff;
        text-align: right;
        line-height: 60px;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;

        span {
            padding-right: 15px;
        }
    }
}
.swiper-container:hover .btnswiper {
    display: inline-block;
}
.btnswiper {
    display: none;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: 30px;
    right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: 30px;
    left: auto;
}

.swiper-pagination {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: absolute;
    left: 16px;
    bottom: 16px;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    width: auto;
    left: 16px;
    bottom: 16px;
    padding: 0 10px;
}
.my-bullet {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    margin: 3px;
}

.my-bullet-active {
    width: 29px;
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
}
</style>
